<template>
  <div :class="['pagination-container', customClass]">
    <!-- 插槽：自定义分页信息显示部分 -->
    <slot name="info">
      <span class="pagination-info">
        <div class="pagination-total">共 {{ totalItems }} 条</div>
        <div class="pagination-page">
          第
          <p class="pagination-current">{{ currentPage }}</p>
          页 / 共 {{ totalPages }} 页
        </div>
      </span>
    </slot>

    <!-- 每页显示条目数选择 -->
    <el-select
      v-model="localPageSize"
      @change="handleSizeChange"
      class="pagination-size"
      :disabled="disableSizeSelect"
    >
      <el-option
        v-for="size in sizes"
        :key="size"
        :label="`${size}条/页`"
        :value="size"
      />
    </el-select>

    <!-- 首页按钮 -->
    <el-button
      @click="goToFirstPage"
      :disabled="currentPage === 1"
      class="pagination-first"
      >{{ firstText }}</el-button
    >

    <!-- 上一页按钮 -->
    <el-button
      class="prev-button"
      @click="goToPrevPage"
      :disabled="currentPage === 1"
      v-if="prevText"
      >{{ prevText }}</el-button
    >
    <el-button
      class="prev-button"
      @click="goToPrevPage"
      :disabled="currentPage === 1"
      v-else
      ><i class="prev-icon"></i
    ></el-button>

    <!-- 页码按钮 -->
    <el-pagination
      :current-page="currentPage"
      :page-size="localPageSize"
      :total="totalItems"
      layout="pager"
      @current-change="handlePageChange"
    />

    <!-- 下一页按钮 -->
    <el-button
      class="next-button"
      v-if="nextText"
      @click="goToNextPage"
      :disabled="currentPage === totalPages"
      >{{ nextText }}</el-button
    >
    <el-button
      class="next-button"
      v-else
      @click="goToNextPage"
      :disabled="currentPage === totalPages"
      ><i class="next-icon"></i
    ></el-button>

    <!-- 尾页按钮 -->
    <el-button
      class="pagination-last"
      @click="goToLastPage"
      :disabled="currentPage === totalPages"
      >{{ lastText }}</el-button
    >

    <!-- 跳页功能 -->
    <span v-if="!disableJump" class="pagination-jump-text">前往</span>
    <el-input
      v-if="!disableJump"
      v-model.number="jumpPage"
      size="small"
      class="pagination-jump"
      placeholder="页码"
      @keyup.enter="jumpToPage"
      @blur="jumpToPage"
    />
    <span v-if="!disableJump">页</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, PropType } from "vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "CustomPagination",
  props: {
    // 总条目数
    totalItems: {
      type: Number,
      required: true,
      default: 0
    },
    // 当前页码
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页显示条目数
    pageSize: {
      type: Number,
      default: 10
    },
    // 可选择的每页显示条目数选项
    sizes: {
      type: Array as PropType<number[]>,
      default: () => [10, 20, 30, 50]
    },
    // 首页按钮文本
    firstText: {
      type: String,
      default: "首页"
    },
    // 上一页按钮文本
    prevText: {
      type: String,
      default: ""
    },
    // 下一页按钮文本
    nextText: {
      type: String,
      default: ""
    },
    // 尾页按钮文本
    lastText: {
      type: String,
      default: "尾页"
    },
    // 是否禁用跳页功能
    disableJump: {
      type: Boolean,
      default: false
    },
    // 是否禁用每页显示条目数选择
    disableSizeSelect: {
      type: Boolean,
      default: false
    },
    // 自定义类名
    customClass: {
      type: String,
      default: ""
    }
  },
  setup(props, { emit }) {
    // 本地保存的每页显示条数
    const localPageSize = ref(props.pageSize);
    // 跳转到的页码
    const jumpPage = ref<number | null>(props.currentPage);

    // 计算总页数
    const totalPages = computed(() =>
      Math.ceil(props.totalItems / localPageSize.value)
    );

    // 处理页码变化
    const handlePageChange = (newPage: number) => {
      emit("update:currentPage", newPage);
      emit("page-change", newPage);
      jumpPage.value = newPage; // 更新 jumpPage 以同步当前页码
    };

    // 处理每页显示条数变化
    const handleSizeChange = (newSize: number) => {
      localPageSize.value = newSize;
      emit("update:pageSize", newSize);
      emit("size-change", newSize);
      emit("update:currentPage", 1); // 重置到第一页
    };

    // 跳转到首页
    const goToFirstPage = () => emit("update:currentPage", 1);

    // 跳转到上一页
    const goToPrevPage = () => {
      if (props.currentPage > 1) {
        emit("update:currentPage", props.currentPage - 1);
      }
    };

    // 跳转到下一页
    const goToNextPage = () => {
      if (props.currentPage < totalPages.value) {
        emit("update:currentPage", props.currentPage + 1);
      }
    };

    // 跳转到尾页
    const goToLastPage = () => emit("update:currentPage", totalPages.value);

    // 跳转到指定页码
    const jumpToPage = () => {
      if (jumpPage.value === null || isNaN(jumpPage.value)) {
        ElMessage.warning("请输入有效的页码");
        return;
      }
      if (jumpPage.value < 1) {
        jumpPage.value = 1;
      }
      if (jumpPage.value > totalPages.value) {
        jumpPage.value = totalPages.value;
      }
      emit("update:currentPage", jumpPage.value);
    };

    return {
      localPageSize,
      jumpPage,
      totalPages,
      handlePageChange,
      handleSizeChange,
      goToFirstPage,
      goToPrevPage,
      goToNextPage,
      goToLastPage,
      jumpToPage
    };
  }
});
</script>

<style lang="scss" scoped>
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  :deep(.el-pager li) {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #266eff66;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin: 0 5px;
  }
  :deep(.el-input) {
    --el-input-border-color: #266eff66 !important;
  }

  :deep(.el-pager .is-active) {
    background: #266eff;
    color: #fff;
  }
}

.pagination-info {
  margin-right: 10px;
  display: flex;
  .pagination-total {
    display: flex;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-align: center;
    color: #333333;
  }
  .pagination-page {
    margin-left: 8px;
    display: flex;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-align: center;
    color: #333333;
    .pagination-current {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 500;
      line-height: 19.6px;
      text-align: center;
      color: #3679ff;
      margin: 0 3px;
    }
  }
}

.pagination-size {
  margin-right: 10px;
  width: 102px;
  height: 40px;
  border-radius: 4px;
  :deep(.el-input__inner) {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-align: center;
    color: #333333;
  }
}

.pagination-first,
.pagination-last {
  width: 61px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #266eff66;
  background: #ffffff;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: center;
  color: #666666;
  margin: 0 10px;
}

.prev-button {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #266eff66;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .prev-icon {
    width: 15px;
    height: 9px;
    background: url("@/assets/prevIcon.svg") no-repeat;
  }
}
.next-button {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #266eff66;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .next-icon {
    width: 15px;
    height: 9px;
    background: url("@/assets/nextIcon.svg") no-repeat;
  }
}

.pagination-jump-text {
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: center;
  margin-left: 12px;
}
.pagination-jump {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin: 0 5px;
  :deep(.el-input__inner) {
    display: flex;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
    text-align: center;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-align: center;
    color: #666666;
  }
}

.el-button {
  margin: 0 5px;
}
</style>
